<template>
  <div class="warpper-box sendSalary">
    <a-card style="margin-top: 10px;">
      <div style="display: flex;justify-content: flex-start;align-items: flex-start;">
        <a-space style="padding-left: 10px;">
          方案名称：
          <a-input placeholder="请输入方案名称" v-model="caseName" />
        </a-space>
        <a-space style="padding-left: 10px;">
          参保城市:
          <a-cascader :options="cityJson" placeholder="请选择" v-model="city" />
        </a-space>
      </div>
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="false" rowKey="insureType">
        <span slot="minBase" slot-scope="text, record">
          <a-input v-model="record.minBase" style="width: 70px;"></a-input>
          <span style="padding: 0 10px;">-</span>
          <a-input v-model="record.maxBase" style="width: 70px;"></a-input>
        </span>
        <span slot="companyRatio" slot-scope="text, record">
          <a-input v-model="record.companyRatio" style="width: 120px;margin-right: 5px;"></a-input>
          <span v-if="record.insureType == 6 || record.insureType == 8">
            <a-select v-model="record.companyRatioType">
              <a-select-option :key="1">%</a-select-option>
              <a-select-option :key="2">元</a-select-option>
            </a-select>
          </span>
          <span v-else>%</span>
        </span>
        <span slot="personalRatio" slot-scope="text, record">
          <a-input v-model="record.personalRatio" style="width: 120px;margin-right: 5px;"></a-input>
          <span v-if="record.insureType == 6 || record.insureType == 8">
            <a-select v-model="record.personalRatioType">
              <a-select-option :key="1">%</a-select-option>
              <a-select-option :key="2">元</a-select-option>
            </a-select>
          </span>
          <span v-else>%</span>
        </span>
        <span slot="mergeType" slot-scope="text, record" v-if="record.insureType != 7">
          <a-select v-model="record.mergeType" placeholder="请选择" style="width: 120px;"
            :disabled="record.insureType == 1 || record.insureType == 2 || record.insureType == 3 || record.insureType == 4 || record.insureType == 8">
            <a-select-option :key="0">
              空
            </a-select-option>
            <a-select-option :key="1">
              医疗保险
            </a-select-option>
          </a-select>
        </span>
        <!-- <span slot="censusRegisterEffect" slot-scope="text, record" v-if="record.insureType != 7">
          <a-select v-model="record.censusRegisterEffect" placeholder="请选择" style="width: 120px;">
            <a-select-option :key="1">
              全部缴纳
            </a-select-option>
            <a-select-option :key="2">
              城镇缴纳
            </a-select-option>
            <a-select-option :key="3">
              农村缴纳
            </a-select-option>
          </a-select>
        </span> -->
      </a-table>
    </a-card>
    <!-- 返回||提交 -->
    <a-card class="footBtn" hoverable>
      <a-button key="back" icon="logout" class="ant-btn-warning" @click="goBack">返回</a-button>
      <a-button type="primary" icon="file-done" @click="submit" style="margin-left: 10px;">保存</a-button>
    </a-card>
  </div>
</template>

<script>
import store from '@/store'
import {
  PARAMS_PUBLICPLAN,
  COLUMNS_PUBLICPLANHANDLE
} from "./form"
import {
  OPTION_BLOCK,
  OPTION_INLINE
} from "../base_form"
import {
  caseConfigDetail,
  ediCaseConfig
} from "@/api/human/ensurePublicPlan"
import { mapGetters, mapActions } from 'vuex'
import {
  cityJson
} from "@/api/human/city.js"
export default {
  name: 'publicPlanHandle',
  components: {

  },
  data() {
    return {
      params: {
        fApi: {},
        rule: PARAMS_PUBLICPLAN,
        option: OPTION_INLINE,
      },
      table: {
        columns: COLUMNS_PUBLICPLANHANDLE,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },

      cityJson: cityJson,
      caseId: "",
      caseName: "",
      city: [],
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  activated() {
    this.caseId = this.$route.query.caseId;
    this.loadTable();
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {

  },
  methods: {
    // 获取列表
    async loadTable() {
      const { code, data } = await caseConfigDetail(this.caseId);
      if (code === '1') {
        this.caseName = data.caseName;
        this.city = data.city.split(",");
        if (data.configList.length == 0) {
          this.table.loadData = [
            { insureType: 1, minBase: 0, maxBase: 0, companyRatio: 0, personalRatio: 0, companyRatioType: 1, personalRatioType: 1, mergeType: 0 },
            { insureType: 2, minBase: 0, maxBase: 0, companyRatio: 0, personalRatio: 0, companyRatioType: 1, personalRatioType: 1, mergeType: 0 },
            { insureType: 3, minBase: 0, maxBase: 0, companyRatio: 0, personalRatio: 0, companyRatioType: 1, personalRatioType: 1, mergeType: 0 },
            { insureType: 4, minBase: 0, maxBase: 0, companyRatio: 0, personalRatio: 0, companyRatioType: 1, personalRatioType: 1, mergeType: 0 },
            { insureType: 5, minBase: 0, maxBase: 0, companyRatio: 0, personalRatio: 0, companyRatioType: 1, personalRatioType: 1, mergeType: 0 },
            { insureType: 6, minBase: 0, maxBase: 0, companyRatio: 0, personalRatio: 0, companyRatioType: 1, personalRatioType: 1, mergeType: 0 },
            { insureType: 8, minBase: 0, maxBase: 0, companyRatio: 0, personalRatio: 0, companyRatioType: 1, personalRatioType: 1, mergeType: 0 },
            { insureType: 7, minBase: 0, maxBase: 0, companyRatio: 0, personalRatio: 0, companyRatioType: 1, personalRatioType: 1, mergeType: 0 }
          ]
        } else {
          this.table.loadData = data.configList;
        }
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    goBack() {
      this.$router.back();
    },
    async submit() {
      if (this.city.length > 2) {
        this.city.pop();
      }
      let params = {
        caseId: this.caseId,
        city: this.city.join(","),
        caseName: this.caseName,
        configAddReqDtoList: this.table.loadData
      }
      const { code } = await ediCaseConfig(params);
      if (code == 1) {
        this.$message.success('操作成功');
        this.loadTable();
      }
    },
    reset() {
      this.params.fApi.resetFields();
      this.loadTable();
    }
  }
}
</script>
<style lang="less"></style>